Categorías en forma de pestaña horizontal

Vamos a instalar unas en forma de pestaña según Leonel Alvarado en su blog Trucos Bogger
Una vez tengamos los post etiquetados nos dirigimos a:
Plantilla/Edicion de Html/Expandir plantillas de artilugios.

Buscamos esta línea de código:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Y la sustituimos por esta:

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">


Luego buscamos:]]></b:skin> y justo antes añadiremos este código:

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}

#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabsB li {
display:inline;
margin:0;
padding:0;
}

#tabsB a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsB a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

#tabsB a span {
float:none;
}

#tabsB a:hover span {
color:#000;
}

#tabsB a:hover {
background-position:0% -42px;
}

#tabsB a:hover span {
background-position:100% -42px;
}

Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y reemplazaremos la anterior de color azul por esta:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsB'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

En la siguiente imagen podemos ver una tabla de colores con las diferentes etiquetas creadas para un menú, pero es perfectamente aplicable a las etiquetas en forma de pestaña para las categorías que explicamos en esta entrada.

Imagen obtenida de Exploding-boy gracias a U.B.H

Cuando decidas el color para tus etiquetas en forma de pestaña puedes encontrar el código correspondiente a cada color AQUÍ


Si decidimos cambiar nuestras etiquetas por otro color, no olvidemos que también debemos cambiar la letra de la etiqueta en el último código (rojo) justamente donde dice:
<b:includable id='main'>
<div id='tabsB'>
<ul>


Y un acosa más... aunque ahora Blogger nos da la posibilidad de recuperar la anterior plantilla, nunca está demás tener una copia guardada ;)